<template>
  <div>
    <van-checkbox v-model="checked" @click="show">
      <!-- 自定义图标 -->
      <img
        slot="icon"
        slot-scope="props"
        :src="props.checked ? icon.active : icon.normal"
      >
    </van-checkbox>
  </div>
</template>

<script>
export default {
  name: 'clothColor',
  data () {
    return {
      data: {
        flag: this.$store.state.team1,
        // 传递的队服颜色  白色

        color: 'white'
      },
      checked: false,
      icon: {
        normal: require('@/images/serve/team/normal_white.png'),
        active: require('@/images/serve/team/active_white.png')
      }
    }
  },
  methods: {
    show () {
      if (this.checked === true) {
        this.$store.commit('Kit_color_function', this.data)
      }
    }
  }
}
</script>

<style scoped>
  ::v-deep .van-checkbox__icon{
    height: 100%;
  }
  .van-checkbox img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 50%;
  }
</style>
